<template>
  <view class="w-100">
    <view class="w-100 f-c-c">
      <!-- <view class="w204 h60 f-c-c bg-theme font30 font700 t-20 circle30">成长报告</view> -->
      <view class="w204 h60"></view>
    </view>

    <!-- <view class="w-100 f-c-c h46 py-1 re"> -->
    <!-- <view class="font20 t-7 font600 px-3 bg-f8ff re z-999">{{userInfo.userName || '在线购票'}} 小朋友，您已经</view> -->
    <!-- <view class="w-100 h1 bg-ccc ab left0 top24 z-99"></view> -->
    <!-- </view> -->

    <scroll-view
      class="scroll-view_H uni-scroll pt-3 pb-4 h466"
      scroll-x="true"
      @scroll="scroll"
      scroll-with-animation
      :scroll-left="scroll_left"
    >
      <view class="px-2-4">
        <view
          style="display: inline-block"
          class="pr-2 h346"
          v-for="(item, index) in list"
          :key="item.id"
          @click="set_shop(item)"
        >
          <view class="w598 h346">
            <image
              :src="`../../../static/icon_popup_top_${item.code}.png`"
              class="w598 h338"
            />
            <view style="margin-top: -168rpx" class="re">
              <view
                class="w-100 h84 rounded-left-34"
                :style="'background-color:' + item.bg"
              >
                <view
                  class="h84 w-100 rounded-bottom-34"
                  :style="'background-color:' + item.bg"
                ></view>
              </view>
              <view
                class="w-100 h84 rounded-right-34 show0"
                :style="'background-color:' + item.bg"
              >
                <view class="bg-white h84 w-100 rounded-top-34 pt-1">
                  <view
                    v-if="index == 0"
                    class="f-c-c font28 t-20 font700 h-100"
                    >来了<text class="t-theme_1 font35 font700 mx-06">
                      {{ item.number }} </text
                    >次场馆</view
                  >

                  <view
                    v-if="index == 1"
                    class="f-c-c font28 t-20 font700 h-100"
                    >完成了<text class="t-theme_1 font35 font700 mx-06">
                      {{ item.number }} </text
                    >条路线</view
                  >

                  <view
                    v-if="index == 2"
                    class="f-c-c font28 t-20 font700 h-100"
                    >点亮了<text class="t-theme_1 font35 font700 mx-06">
                      {{ item.number }} </text
                    >个徽章</view
                  >
                </view>
              </view>
              <image
                :src="'../../../static/icon_up_' + (index + 1) + '.png'"
                class="w548 h422 ab z-99 left25 bottom0"
              />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="w-100 px-2-6">
      <view class="w-100 bg-white circle34 show0 re">
        <view class="ab font30 t-20 font700 top51 left30 z-99 h30 f-c-c"
          >成长记录</view
        >
        <image
          class="w240 h90 ab top35"
          style="left: -12rpx"
          src="../../../static/icon_grow_1.png"
        />
        <image
          class="w322 h218 ab right11 z-99"
          style="top: -54rpx"
          src="../../../static/icon_grow_up.png"
        />
        <view class="w-100 h130"></view>
        <view class="w-100 pl-5 pt-1 pb-3">
          <view
            class="w-100 re h330 border-left re"
            v-for="(item, index) in badge"
            :key="item.id"
          >
            <view
              class="w24 h24 rounded-circle bg-theme ab top0"
              style="left: -12rpx"
            ></view>
            <view class="f-s-c h24">
              <view class="f-s-c w60 h24 re top0 left16">
                <text class="w8 h4 bg-theme mr-05"></text>
                <text class="w8 h4 bg-theme mr-05"></text>
                <text class="w8 h4 bg-theme mr-05"></text>
                <text class="w8 h4 bg-theme mr-05"></text>
              </view>
              <view class="font27 h24 f-c-c font600 t-20 pl-2">
                {{ item.createTime }}
              </view>
            </view>
            <view class="ml-5 w498 h228 show0 bg-f8ff mt-3 circle20 ov-hd">
              <view
                class="w-100 h70 bg-theme rounded-bottom-20 f-s-c font22 t-20 pl-3"
              >
                {{ item.createTime }}
              </view>
              <view class="w-100 h158 bg-theme">
                <view class="w-100 h-100 bg-f8ff rounded-top-20 re px-2-6 pt-3">
                  <scroll-view
                    class="scroll-view_H uni-scroll h120"
                    scroll-x="true"
                  >
                    <view class="f-s-c">
                      <view
                        class="w110 h110 mr-2"
                        v-for="page in item.badgeList"
                        :key="page.id"
                      >
                        <ImageFile :url="page.pic" className="w110 h110" />
                      </view>
                    </view>
                  </scroll-view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="badge.length === 0" class="w-100 font28 t-8 py-6 t-a"
            >暂时记录</view
          >
        </view>
      </view>
    </view>

    <view class="w-100 h220"></view>
  </view>
</template>

<script>
import ImageFile from "../../../components/img_file.vue";
import {
  destroyTicketNumber,
  doneLineNumber,
  lightZjBadgeNumber,
  growthReport,
} from "../../../api/user.js";
export default {
  components: {
    ImageFile,
  },
  data() {
    return {
      userInfo: {},
      indicatorDots: true,
      autoplay: true,
      interval: 300000,
      duration: 500,
      badge: [],
      list: [
        {
          number: 0,
          bg: "#ffecb8",
          code: "ff",
        },
        { number: 0, bg: "#e8ffc0", code: "e8" },
        { number: 0, bg: "#b8fffa", code: "b8" },
      ],
      scroll_left: 0,
      old: {
        scroll_left: 0,
      },
      get_time: 0,
      query: {
        currentPage: 1,
        pageSize: 100,
      },
    };
  },
  created() {
    this.userInfo = uni.getStorageSync("userInfo") || {};
    this.set_shop_type();
    this.get_number(0);
    this.get_number(1);
    this.get_number(2);
    this.get_growthReport();
  },
  methods: {
    scroll(e) {
      this.old.scroll_left = e.detail.scrollLeft;
    },
    async get_number(index) {
      let query = destroyTicketNumber;
      if (index === 1) {
        query = doneLineNumber;
      }
      if (index === 2) {
        query = lightZjBadgeNumber;
      }
      const { code, body } = await query();
      if (code === "0") {
        this.list[index].number = body || 0;
      }
    },
    async get_growthReport() {
      const { code, body } = await growthReport(this.query);
      if (code === "0") {
        this.badge = body.records;
      }
    },
    set_shop_type() {
      let num1 = uni.upx2px(570);
      let num2 = uni.upx2px(1140);
      let num3 = uni.upx2px(1710);

      this.get_time = setInterval(() => {
        this.scroll_left = this.old.scroll_left;

        this.$nextTick(() => {
          // 第一个显示大于一半 则显示下一个 以此类推
          // 当显示为最后一个 切换到第一个
          if (this.old.scroll_left == 0) {
            this.scroll_left = num1;
          } else if (this.old.scroll_left < num1 / 2) {
            this.scroll_left = num1;
          } else if (this.old.scroll_left == num1) {
            this.scroll_left = num2;
          } else if (this.old.scroll_left < num2 / 2) {
            this.scroll_left = num2;
          } else if (this.old.scroll_left == num2) {
            this.scroll_left = num3;
          } else if (this.old.scroll_left < num3 / 2) {
            this.scroll_left = num3;
          } else {
            this.scroll_left = 0;
          }
          console.log("sss");
        });
      }, 30000);
    },
  },
  destroyed() {
    clearInterval(this.get_time);
  },
};
</script>

<style lang="scss" scoped>
.rounded-left-34 {
  border-radius: 34rpx 34rpx 34rpx 0;
}
.rounded-bottom-34 {
  border-radius: 34rpx 34rpx 0 34rpx;
}
.rounded-right-34 {
  border-radius: 34rpx 0 34rpx 34rpx;
}
.rounded-top-34 {
  border-radius: 0 34rpx 34rpx 34rpx;
}
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
.rounded-bottom-20 {
  border-radius: 20rpx 20rpx 0 20rpx;
}
.rounded-top-20 {
  border-radius: 0 20rpx 20rpx 20rpx;
}
</style>
